<template>
  <div class="zp-online">
    <Header />
    <NavBar title="网络招聘">
      <template v-slot:right>
        <div class="btn-filter" @click="searchVisible = true">
          筛选
          <i class="icon icon-filter-1"></i>
        </div>
      </template>
    </NavBar>

    <div class="online-list">
      <van-list
        v-model:loading="pageParams.loading"
        v-model:error="pageParams.error"
        :finished="pageParams.finished"
        :finished-text="pageParams.finishedText"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <PostItem
          v-for="(item, index) in postList"
          :key="index"
          :post="item"
          type="zp"
        />
      </van-list>
    </div>

    <SearchFilter :visible="searchVisible" @search="onSearch" @close="searchVisible = false" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { List as vanList } from "vant";
import NavBar from "@/components/NavBar.vue";
import Header from "@/components/Header.vue";
import PostItem from "@/components/PostItem.vue";
import SearchFilter from "@/components/SearchFilter.vue";
import Empty from "@/components/Empty.vue";

import usePostSearch from "@/composables/usePostSearch";

const {
  postList,
  searchPostList,
  pageParams,
} = usePostSearch();

const searchVisible = ref(false)

const onSearch = (data) => {
  searchPostList(data);
};

const onLoad = () => {
  searchPostList();
};

</script>

<style lang="scss" scoped>
.zp-online {
  padding-bottom: 20px;
}
.online-list {
  margin-bottom: 20px;
}
</style>